<template>
  <div class="form-card">
    <VsFormItem
      :label="item.type === 'in' ? $demoi18n('panelEvent.label.receiveEvent') : $demoi18n('panelEvent.label.issueEvent')"
    >
      <el-input
        v-model="item.key"
        :placeholder="$demoi18n('word.plsInput')"
        size="default"
      ></el-input>
    </VsFormItem>
    <VsFormItem
      v-for="(parameter, pIndex) in item.parameters"
      v-show="!parameter.hide && item.type === 'out' && isEndTimeHidden(parameter)"
      :key="pIndex"
      :label="parameter.label"
    >
      <!-- default-first-option -->
      <el-select
        v-model="parameter.key"
        clearable
        filterable
        allow-create
        size="default"
        :class="'panel-data-select-' + xvueTheme"
        :popper-class="'select-poper-' + xvueTheme"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.option_label"
          :value="item.option_value"
        ></el-option>
      </el-select>
    </VsFormItem>

    <!-- config有extraTpye为fieldName的 才展示（ page-table 用到） -->
    <VsFormItem
      v-if="item.type === 'out' && item.extraTpye && item.extraTpye === 'fieldName'"
      :label="$demoi18n('word.fieldName')"
    >
      <el-input
        v-model="item.paramKey"
        :placeholder="$demoi18n('word.plsInput')"
        size="default"
      ></el-input>
    </VsFormItem>

    <img
      v-show="!hideDelete && xvueTheme === 'light'"
      class="img-cancel"
      src="./cancel_light.png"
      @click="deleteItem"
    />
    <img
      v-show="!hideDelete && xvueTheme === 'dark'"
      class="img-cancel"
      src="./cancel_dark.png"
      @click="deleteItem"
    />
  </div>
</template>

<script>
export default {
  name: 'PanelLinkageFormCardIndexXvueNew',
  props: ['item', 'index', 'isHidden', 'hideDelete', 'options'],
  emits: ['deleteItem'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
    };
  },
  watch: {

    // 接收linkage显隐控制项
    isHidden: {
      handler: function(newVal, oldVal) {
        const parameter = this.item.parameters.find(item => item.key === 'endTime');
        if (parameter) {
          parameter.isHidden = newVal;
        }
      },
      immediate: true,
    },
  },
  methods: {
    deleteItem() {
      this.$emit('deleteItem', this.index);
    },

    // 时间组件显隐控制
    isEndTimeHidden(parameter) {
      const res = Object.keys(parameter).includes('isHidden') && this.isHidden;
      return !res;
    },
  },
};
</script>

<style lang="less" scoped>
.form-card {
  padding: 12px 10px;
  margin-top: 10px;
  margin-bottom: 1px;
  position: relative;
  .delete-btn {
    display: none;
  }
  .img-cancel {
    position: absolute;
    top: -10px;
    right: -10px;
    display: none;
    cursor: pointer;
  }
  &:hover {
    outline: 1px solid #9cdeff;
    .delete-btn {
      display: block;
    }
    .img-cancel {
      display: block;
    }
  }
}
</style>
